<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css" />
	</head>
	<body>

		<div id="flow-container">
			<div class="flow-node">
				<div class="node undefined">
					<div class="node-title">提交</div>
					<div class="node-content">提交人：李飞飞</div>
				</div>
				<div class="bottom-v-line"></div>
				<div class="add-node-btn">
					<div class="add-btn">+</div>
					
				</div>
				<div class="arrow"></div>
			</div>
			<div class="flow-node">
				<div class="node approval">
					<div class="node-title">审批</div>
					<div class="node-content">提交人：李飞飞</div>
				</div>
				<div class="bottom-v-line"></div>
				<div class="add-node-btn">
					<div class="add-btn">+</div>
					
				</div>
				<div class="arrow"></div>
			</div>

			<!-- 条件分支start -->

			<div class="flow-route">
				<div class="top-h-line"></div>
				<div class="branches">
					<div class="branch">
						<div class="top-v-line">
						</div>
						<div class="nodes">
							<div class="flow-node">
								<div class="node arproval">
									<div class="node-title">
										审批
									</div>
									<div class="node-content">
										提交人：李飞飞
									</div>
								</div>
								<div class="bottom-v-line">

								</div>
								<div class="add-node-btn">
									<div class="add-btn">
										＋
									</div>
								</div>
								<div class="arrow"></div>
							</div>
							<div class="flow-route">
								<div class="top-h-line"></div>
								<div class="branches">
									<div class="branch">
										<div class="top-v-line">

										</div>
										<div class="nodes">
											<div class="flow-node">
												<div class="node arproval">
													<div class="node-title">
														审批
													</div>
													<div class="node-content">
														提交人：李飞飞
													</div>
												</div>
												<div class="bottom-v-line">

												</div>
												<div class="add-node-btn">
													<div class="add-btn">
														＋
													</div>
												</div>
												<div class="arrow"></div>
											</div>
										</div>
									</div>

									<div class="branch">
										<div class="top-v-line">

										</div>
										<div class="nodes">
											<div class="flow-node">
												<div class="node arproval">
													<div class="node-title">
														审批
													</div>
													<div class="node-content">
														提交人：李飞飞
													</div>
												</div>
												<div class="bottom-v-line">

												</div>
												<div class="add-node-btn">
													<div class="add-btn">
														＋
													</div>
												</div>
												<div class="arrow"></div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 条件分支end -->

			<div class="flow-node">
				<div class="node end">
					<div class="node-title">结束</div>
					<div class="node-content">提交人：李飞飞</div>
				</div>
			</div>
		</div>

	</body>
</html>
<script type="text/javascript">
	class NodeTitle {
		constructor(txt) {
			this.element = document.createElement("div");
			this.element.setAttribute("class", "node-title");
			this.element.innerHTML = txt;
		}

		getElement() {
			return this.element;
		}
	}

	class NodeContent {
		constructor(txt) {
			this.element = document.createElement("div");
			this.element.setAttribute("class", "node-content");
			this.element.innerHTML = txt;
		}

		getElement() {
			return this.element;
		}

		appendChild(obj) {
			this.element.appendChild(ele.getElement());
		}
	}

	class NodeLine {
		constructor() {
			this.element = document.createElement("div");
			this.element.setAttribute("class", "bottom-v-line");
		}

		getElement() {
			return this.element;
		}
	}

	class NodeArrow {
		constructor() {
			this.element = document.createElement("div");
			this.element.setAttribute("class", "arrow");
		}

		getElement() {
			return this.element;
		}
	}

	class NodeAddBtn {
		constructor(flowNode) {
			this.flowNode = flowNode;
			this.addNodeTypeBtns = null;
			this.element = document.createElement("div");
			this.element.setAttribute("class", "add-node-btn");
			let addBtn = document.createElement("div");
			addBtn.setAttribute("class", "add-btn");
			addBtn.innerHTML = "+";
			addBtn.addEventListener('click', (e) => {
				//this.flowNode.addNext();
				this.addNodeTypeBtns.show();
			})
			this.element.appendChild(addBtn);

			//挂载添加按钮组
			this.addNodeTypeBtns = new AddNodeTypeBtns(this.flowNode);
			this.appendChild(this.addNodeTypeBtns)

		}

		appendChild(obj) {
			this.element.appendChild(obj.getElement());
		}

		setFlowNode(flowNode) {
			this.flowNode = flowNode;
		}

		getElement() {
			return this.element;
		}
	}

	class Node {
		constructor(name, type) {
			this.element = document.createElement("div");
			this.element.setAttribute("class", "node " + type);
		}

		appendChild(ele) {
			this.element.appendChild(ele.getElement());
		}

		getElement() {
			return this.element;
		}
	}



	class FlowNode {
		constructor(name, type) {
			this.flowType = type;
			this.name = name;
			this.element = document.createElement("div");
			this.element.setAttribute("class", "flow-node");

			var node = new Node(name, this.flowType);
			var nodeTitle = new NodeTitle(name);
			var nodeContent = new NodeContent("提交人：李飞飞");
			node.appendChild(nodeTitle);
			node.appendChild(nodeContent);
			this.appendChild(node);
			if (type != "end") {
				var nodeLine = new NodeLine();
				var nodeAddBtn = new NodeAddBtn(this);
				var nodeArrow = new NodeArrow();
				this.appendChild(nodeLine);
				this.appendChild(nodeAddBtn);
				this.appendChild(nodeArrow);
				nodeAddBtn.setFlowNode(this);
			}

		}

		addNext(name, type) {
			let current = this.element;
			let parent = current.parentNode;
			let nextNode = current.nextElementSibling;
			console.log("type", type)
			let newFlowNode = new FlowNode(name, type)
			let newElement = newFlowNode.getElement();
			parent.insertBefore(newElement, nextNode);
		}

		getName() {
			return this.name;
		}

		appendChild(ele) {
			this.element.appendChild(ele.getElement());
		}

		getElement() {
			return this.element;
		}
	}

	class ApprovalNode extends FlowNode {
		constructor(name) {
			super(name)
		}
	}

	class AddNodeTypeBtns {
		constructor(flowNode) {
			this.flowNode = flowNode;
			this.addNodeTypesElements = document.createElement("div");
			this.addNodeTypesElements.setAttribute("class", "add-node-types");
			this.addNodeTypesElements.appendChild(this._createBtn("审批", "imgs/icon/审批人.png", (e) => {
				this.flowNode.addNext('审批', 'approval');
				this.hide();
			}))
			this.addNodeTypesElements.appendChild(this._createBtn("抄送人", "imgs/icon/抄送人.png", (e) => {
				this.flowNode.addNext('抄送', 'cc');
				this.hide();
			}))
			this.addNodeTypesElements.appendChild(this._createBtn("办理人", "imgs/icon/办理人.png", (e) => {
				this.flowNode.addNext('办理', 'handle');
				this.hide();
			}))
			this.addNodeTypesElements.appendChild(this._createBtn("条件分支", "imgs/icon/条件分支.png", (e) => {
				alert("暂未开放");
			}))
		}

		getElement() {
			return this.addNodeTypesElements;
		}

		show() {
			this.addNodeTypesElements.style.display = "block";
		}

		hide() {
			this.addNodeTypesElements.style.display = "none";
		}

		_createBtn(typeName, iconSrc, clickEventHandle) {
			let nodeTypeWrap = this._createElement("div", "node-type-wrap");
			if (clickEventHandle) {
				nodeTypeWrap.addEventListener('click', clickEventHandle);
			}
			let nodeTypeIcon = this._createElement("div", "node-type-icon");
			let img = this._createElement("img");
			img.setAttribute("src", iconSrc);
			let nodeTypeName = this._createElement("div", "node-type-name");
			nodeTypeName.innerHTML = typeName;
			nodeTypeIcon.appendChild(img);

			let nodeType = this._createElement("div", "node-type");
			nodeType.appendChild(nodeTypeIcon);
			nodeType.appendChild(nodeTypeName);
			nodeTypeWrap.appendChild(nodeType);
			return nodeTypeWrap;
		}

		_createElement(tagName, className) {
			let tag = document.createElement(tagName);
			tag.setAttribute("class", className);
			return tag;
		}
	}

	// var startFlowNode = new FlowNode("提交");
	// var endFlowNode = new FlowNode("结束", "end");
	// document.getElementById("flow-container").appendChild(startFlowNode.getElement())
	// document.getElementById("flow-container").appendChild(endFlowNode.getElement())
</script>
